<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../css/buy.css" />
		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

			});
		</script>
	</head>
	<body>
		<div id="app">
			<van-row class="header">
				<van-col span="10">
					<van-icon name="arrow-left" size="30px" @click="b_return" />
				</van-col>
				<van-col span="10">
					<h2>
						结算
					</h2>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="22" offset="1">
					<van-badge-group :active-key="activeKey">
						<van-badge title="商品清单"></van-badge>
					</van-badge-group>
					<van-card v-show="isShow" v-for="(p,index) in order" :num="value" :price="p.GoodsPrice" :desc="p.Name" :thumb="p.GoodsImageUrl" style="background: white;">
							<div slot="footer">
								<van-stepper v-model="value" integer :min="1" :max="50" :step="1"></van-stepper>
							</div>
						</van-card>
						<van-card v-show="!isShow" v-for="(p,index) in order" :num="p.BuyCount" :price="p.GoodsPrice" :desc="p.Name" :thumb="p.GoodsImageUrl" style="background: white;">
						</van-card>
					<br />
					<van-badge-group :active-key="activeKey">
						<van-badge title="收货地址"></van-badge>
					</van-badge-group>
					<van-cell-group>
						<van-field v-model="username" required clearable label="联系人" border="false" right-icon="question-o" placeholder="请输入联系人"
						 @click-right-icon="$toast('question')" />
						<van-field v-model="usernumber" required clearable label="手机号码" border="false" placeholder="请输入手机号码" />
						<van-field v-model="useraddress" required clearable label="详情地址" border="false" placeholder="请输入详情地址" />
					</van-cell-group>
					<!-- <van-panel title="联系人:" desc="" status="">

					</van-panel>
					<van-panel title="手机号码:" desc="" status="">

					</van-panel>
					<van-panel title="详情地址:" desc="" status="">

					</van-panel> -->
					<div align="center" style="color:#969799;line-height: 40px;" >
						其他收货地址<van-icon name="arrow-right" @click="GetGoodsAddresses" />
					</div>
				</van-col>
			</van-row>
			<van-row>
				<van-col span="22" offset="1">
					<van-badge-group :active-key="activeKey">
						<van-badge title="支付方式"></van-badge>
					</van-badge-group>
					<van-radio-group v-model="radio">
						<van-cell-group>
							<van-cell title="支付宝" clickable @click="radio = '1'">
								<img src="../img/pay/pay_icon_zfb.png" slot="icon" style="width: 25px; height: 25px;" />
								<van-radio checked-color="#07c160" name="1" />
							</van-cell>
							<van-cell icon="" title="微信支付" clickable @click="radio = '2'">
								<img src="../img/pay/pay_icon_wx.png" slot="icon" style="width: 25px; height: 25px;" />
								<van-radio checked-color="#07c160" name="2" />
							</van-cell>
						</van-cell-group>
					</van-radio-group>
					
				</van-col>
			</van-row>
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<van-submit-bar :price="AllPrice" button-text="提交订单" @submit="onSubmit" />
		</div>
		<script type="text/javascript">
			var buy = new Vue({
				el: "#app",
				data: {
					activeKey: 0,
					radio: '1',
					value: 1,
					AllPrice: 0,
					order:[],
					buyCount:0,
					address:{},
					jsonData:{},
					orderId: 0,

				},
				mounted: function() {
					var show = plus.webview.currentWebview().isShow
					if (show) { //判断是从那里传来的数据
						ajax({ //B类页面
							url: "http://dsapi.ysd3g.com/API/GoodsDetail",
							dataType: "jsonp",
							data: {
								gId: plus.webview.currentWebview().pid
							},
							success(res) {
								var d = {
									GoodsPrice: res.Detail.RealPrice,
									GoodsImageUrl: res.Detail.CoverImage,
									BuyCount: 1,
									Name: res.Detail.Name
								}
								buy.order = buy.order.concat(d);
							}
						});
					} else { //购物车
						var pids = plus.webview.currentWebview().pids
						var Id;
						var Name;
						var GoodsImageUrl;
						var GoodsPrice;
						for (var i = 0; i < pids.length; i++) {
							ajax({
								url: "http://dsapi.ysd3g.com/API/GoodsDetail",
								dataType: "jsonp",
								data: {
									gId: pids[i].goodsId
								},
								success(res) {
									Id = res.Detail.Id;
									Name = res.Detail.Name;
									GoodsImageUrl = res.Detail.CoverImage;
									GoodsPrice = res.Detail.RealPrice;
									for (var j = 0; j < pids.length; j++) {
										if (Id == pids[j].goodsId) {
											buy.buyCount = pids[j].buyCount;
										}
									}
									buy.jsonData = {
										"Id": Id,
										"Name": Name,
										"GoodsImageUrl": GoodsImageUrl,
										"GoodsPrice": GoodsPrice,
										"BuyCount": buy.buyCount,
									}
									buy.order = buy.order.concat(buy.jsonData);
								}
							});
						}
					}
					if (plus.webview.currentWebview().address) { //判断是否是默认地址
						ajax({
							url: "http://dsapi.ysd3g.com/api/MyDefaultAddress",
							dataType: "jsonp",
							data: {
								key: key
							},
							success(res) {
								buy.address = res;
							}
						});
					} else {
						ajax({
							url: "http://dsapi.ysd3g.com/API/EditLoadingData",
							dataType: "jsonp",
							data: {
								key: plus.storage.getItem("key"),
								addressId: plus.webview.currentWebview().addressId
							},
							success(res) {
								buy.address = {
									id: res.Data.Id,
									name: res.Data.Name,
									tel: res.Data.Phone,
									address: res.Data.ProvinceCode + "/" + res.Data.CityCode + "/" + res.Data.DistrictCode + res.Data.DetailedAddress
								};
							}
						})
					}
				},
				methods: {
					b_return: function() {
						var b = plus.webview.currentWebview();
						b.close();
					},
					GetGoodsAddresses: function() {
						if(this.isShow) {
							plus.webview.create("../myCenter/myShippingAddressList.html", "myShippingAddress", {}, {
								isShow_address: true,
								pid: plus.webview.currentWebview().pid,
								isShow: this.isShow
							}).show();
						} else {
							plus.webview.create("../myCenter/myShippingAddressList.html", "myShippingAddress", {}, {
								isShow_address: true,
								pids: plus.webview.currentWebview().pids,
								isShow: this.isShow
							}).show();
						}
					},
					onSubmit: function() {
						var shoppingCartJsonStr = [];
						if(this.isShow) {
							shoppingCartJsonStr = [{
								goodsId: plus.webview.currentWebview().pid,
								buyCount: this.value
							}]
						} else {
							shoppingCartJsonStr = plus.webview.currentWebview().pids
						}
						var toast = buy.$toast.loading({
							duration: 0, // 持续展示 toast
							forbidClick: true, // 禁用背景点击
							message: '正在生成订单'
						});
						ajax({
							url: "http://dsapi.ysd3g.com/API/GeneratingOrder",
							dataType: "jsonp",
							data: {
								key: plus.storage.getItem("key"),
								shoppingCartJsonStr: JSON.stringify(shoppingCartJsonStr)
							},
							success(res) {
								if(res.Error) {
									buy.$toast.fail(res.Msg);
								} else {
									buy.orderId = res.OrderId
									localStorage.setItem(res.orderId, buy.address.id);
									if(!buy.isShow) {
										var phone = JSON.parse(plus.storage.getItem("userData")).Phone
										var shopCart = JSON.parse(localStorage.getItem(phone));
										for(var j = 0; j < shopCart.length; j++) {
											for(var k = 0; k < buy.order.length; k++) {
												if(buy.order[k].Id = shopCart[j].goodsId) {
													shopCart.splice(j, 1);
												}
											}
										}
										var sc = JSON.stringify(shopCart)
										localStorage.setItem(phone, sc);
										plus.webview.getWebviewById("shoppingCart").reload(false);
									}
									buy.$toast.clear();
									payNext();
								}
							}
						});
					}

				}
			})
			function payNext() { //进行支付
				ajax({
					url: "http://dsapi.ysd3g.com/api/OrderPay",
					dataType: "jsonp",
					data: {
						key: key,
						oId: buy.orderId,
						payType: buy.select,
						addressIdx: buy.address.id,
						money: buy.AllPrice
					},
					success(res) {
						if(res.Error) {
							buy.$toast.fail(`未知原因失败`);
						} else {
							var payment = "";
							plus.payment.getChannels(function(s) { //
								channels = s;
								for(var i = 0; i < channels.length; i++) {
									if(channels[i].id == buy.radio) {
										payment = channels[i];
									}
								}
								plus.payment.request(payment, res.strJson, function() {
									buy.$toast.success("支付操作成功！");
									localStorage.removeItem(orderId);
									plus.webview.create("paysuccess.html", "paysuccess", {}, {
										totalPrice: buy.AllPrice,
										oId: buy.orderId
									}).show("slide-in-left");
								}, function(e) {
									buy.$toast.fail(`支付失败：${e.code}`);
								});
							}, function(e) {
								buy.$toast.fail(`获取支付通道列表失败：${e.message}`);
							});
						}
					}
				})
			}
		</script>
	</body>
</html>
